<template>
  <div class="order-detail">
    <nav-bar :title="title"></nav-bar>
    <div class="main">
      <div class="adress" @click="chooseAddr">
        <div class="adress-left">
          <span class="adress-icon adress-loc">
            <img src="/img/11.png" alt />
          </span>
          <span class="adress-tip">
            <p class="adress-people">
              收货人:
              <span class="pad-l5">{{address?address.consignee:'请选择收货人'}}</span>
            </p>
            <p class="adress-place">
              地址:
              <span class="pad-l5">{{address?address.address:'请选择收货地址'}}</span>
            </p>
          </span>
        </div>
        <div class="adress-right">
          <span class="adress-icon">
            <img src="/img/44.png" alt />
          </span>
        </div>
      </div>
      <div class="line"></div>
      <div class="product-info marg-t9">
        <van-cell title="单元格" is-link :value="'共'+calcPriceInfo.total_num+'件'" class="img-show">
          <template slot="title">
            <img :src="item.goods.original_img" alt v-for="(item,index) in productList" :key="`img_${index}`"/>
          </template>
        </van-cell>
        <van-cell title="商品总额" :value="'￥'+calcPriceInfo.total_amount" />
        <van-cell title="优惠金额" :value="'￥'+ cartPriceInfo.goods_fee " />
        <van-cell title="运费" :value="'￥'+calcPriceInfo.shipping_price" />
      </div>
      <div class="discount marg-t9">
        <van-cell title="积分抵扣" :value="calcPriceInfo.integral_money" />
        <van-cell title="优惠券" v-if="coupon" is-link :value="'-'+coupon.money" to="/mycoupon?from=order_detali"/>
        <van-cell title="优惠券" v-else is-link :value="userCartCouponList.length>0?'请选择':'无可用'" to="/mycoupon?from=order_detali"/>
      </div>
      <div class="invoice marg-t9">
        <!-- <van-cell title="运费" :value="freight" /> -->
        <van-cell title="发票" is-link :value="invoice ? invoice.invoice_title: '不开发票'" to="/invoice" />
      </div>
      <div class="leave-message">
        <van-field class="name_input" type="textarea" :value="memo" placeholder="请再次输入您的留言" />
      </div>
      <div class="submit">
        <div class="submit-num">
          <span class="submit-text">实付款:</span>
          <span class="submit-price pad-l5">￥{{calcPriceInfo.order_amount}}</span>
        </div>
        <div class="submit-btn" @click="goToPaying">
          <span>立即支付</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup, Field, Toast } from "vant";
Vue.use(Cell)
  .use(CellGroup)
  .use(Field).use(Toast);
import navBar from "@/components/nav-bar";
export default {
  data() {
    return {
      title: "订单",
      isPaying: false,
      cateInfo:{},
      productList: [{
        goods : {
          original_img:''
        },
      }
      ],
      cartPriceInfo: {
          total_fee:0.00,
          goods_fee:0.00,
      },
      calcPriceInfo:{
        coupon_price: 0,
        goods_price: 0,
        integral_money: 0,
        order_amount: 0,
        order_prom_amount: 0,
        pay_points: 0,
        shipping_price: 0,
        total_amount: 0,
        total_num: 0,
        user_money: 0,
      },
      productCount:1,
      price: "0.00",
      discountPrice: "0.00",
      freightPrice: "0.00",
      integral: "暂无",
      freight: "已免运费",
      payPrice: "0.00",
      memo:'',
      userCartCouponList: [],
      userCouponNum: {
        usable_num: 0
      },
    };
  },
  components: { navBar },
  watch:{
    address_id(){
      this.calcPrice()
    }
  },
  mounted() {
    this.getInfo();
    this.calcPrice()
  },
  computed: {
    address(){
      return this.$store.state.selected_address || undefined
    },
    address_id(){
      return this.address ? this.address.address_id : 0
    },
    coupon(){
      return this.$store.state.selected_coupon || undefined
    },
    coupon_id(){      
      return this.coupon ? this.coupon.id : 0
    },
    invoice(){
      if(this.$store.state.invoice) {
        return this.$store.state.invoice
      }
      return false
    }
  },
  methods:{
    getInfo(){
      this.$store.dispatch('cardPay',{
        address_id: this.address_id,
      }).then(res=>{
        console.log('[cardPay]', res);
        this.productList = res.data.result.cartList
        this.cartPriceInfo = res.data.result.cartPriceInfo
        this.userCartCouponList = res.data.result.userCartCouponList
        this.userCouponNum = res.data.result.userCouponNum
      }).catch(res=>{

      })
    },
    goToPaying() {
      // console.log(1122);
      if(this.isPaying) return false
      if(!this.address_id){
        Toast("请选择收货地址！");
        this.isPaying = false
        return;
      }
      this.$store.dispatch('cardSubmit',{
        action: 'submit',
        address_id: this.address_id,
        invoice_title: this.invoice ? this.invoice.invoice_title : '',
        taxpayer: this.invoice ? this.invoice.taxpayer : '',
        invoice_desc: '',
        coupon_id: this.coupon_id,
        pay_points: this.calcPriceInfo.pay_points,
        user_money: 0,
        user_note: this.memo,
      }).then(res=>{        
        this.$router.push({ name: 'paying', query:{order_id:res.data.result.order_id}})
        this.isPaying = false
      }).catch(res=>{
        this.isPaying = false
      })
    },
    chooseAddr(){
      this.$router.push({ name: "myAddressManagement", query:{
        from: 'order_detail'
      }});
    },
    calcPrice(){
      this.$store.dispatch('calcPrice', {
        action: 'calc',
        address_id: this.address_id,
        coupon_id: this.coupon_id
      }).then(res=>{
        this.calcPriceInfo = res.data.result
      }).catch(e=>{

      })
    }
  }
};
</script>

<style lang="less">
@import "./order-detail.less";
</style>
